<template>
  <div class="member">
    <div class="top">
      <h3>角色管理</h3>
      <div class="topRight">
        <el-input v-model="searchName" class="w-50 m-2" placeholder="请输入名字" :suffix-icon="Search" label-width="200px"/>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="success" @click="dialogVisible = true">新增</el-button>
        <el-dialog v-model="dialogVisible" title="新增角色" width="50%" :before-close="handleClose">
          <!-- <span>This is a message</span> -->
          <el-form label-width="200px" :rules="rules">
            <el-col :span="24">
              <el-form-item label="用户名" label-width="100px" prop="username">
                <el-input v-model="newPerson.username" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="账号" label-width="100px" prop="usernumber">
                <el-input v-model="newPerson.usernumber" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="角色" label-width="100px" prop="role">
                <el-select v-model="newPerson.role" placeholder="请选择角色">
                  <el-option label="职员" value="职员" />
                  <el-option label="主管" value="主管" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="状态" label-width="100px" prop="state">
                <el-select v-model="newPerson.state" placeholder="请选择状态">
                  <el-option label="在职" value="在职" />
                  <el-option label="离职" value="离职" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">关闭</el-button>
              <el-button type="primary" @click="addEvt">
                确定
              </el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </div>

    <!-- 头部 -->
    <div class="main">
      <div class="left">

      </div>
      <div class="right">
        <el-table :data="showList" style="width: 100%">
          <el-table-column prop="id" label="序号" width="240" />
          <el-table-column prop="username" label="用户名" width="240" />
          <el-table-column prop="usernumber" label="账号" width="240" />
          <el-table-column prop="role" label="角色" width="240" />
          <el-table-column prop="state" label="状态" width="240" />
          <el-table-column label="操作" width="240" fixed="right">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
              <!-- <el-dialog
    v-model="dialogVisible2"
    title="修改成员信息"
    width="50%"
    :before-close="handleClose"
  >
    <span>内容</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog> -->
  <el-popconfirm title="你确定要删除他吗？" @confirm="handleDelete(scope.row.id)">
    <template #reference>
      <el-button size="small" type="danger">删除</el-button>
    </template>
  </el-popconfirm>
              
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 修改框 -->
    <el-dialog v-model="dialogVisible2" title="修改角色信息" width="40%">
      <el-form label-width="200px" :rules="rules">
        <el-col :span="24">
          <el-form-item label="用户名" label-width="200px" prop="name">
            <el-input v-model="editP.info.username" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="账号" label-width="200px" prop="username">
            <el-input v-model="editP.info.usernumber" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="成员角色" label-width="200px" prop="role">
            <el-select v-model="editP.info.role" placeholder="请选择角色">
              <el-option label="职员" value="职员" />
              <el-option label="主管" value="主管" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="状态" label-width="200px" prop="sex">
            <el-select v-model="editP.info.state" placeholder="请选择状态">
              <el-option label="在职" value="在职" />
              <el-option label="离职" value="离职" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="联系方式" label-width="100px" prop="phone">
            <el-input v-model="editP.info.phone" />
          </el-form-item>
        </el-col> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="handleSave(editP.info.id)">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { AxiosResponse } from 'axios'
import { ElMessage, ElNotification } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { getRoles, getPermissions, getPermissionsId } from '../../api/roles'
import ProTable from '../../components/table/table.vue'

interface User {
  id: string
  name: string
  description: string
  createdAt: string
  status: boolean
}
let editP = reactive({
  info: {
    id: '',
    username: '',
    usernumber: '',
    role: '',
    state: '',
  }

})
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const searchName = ref('')
const List: any = ref([])
const showList: any = ref([])
const newPerson = reactive({
  id: Date.now() + '',
  username: '',
  usernumber: '',
  role: '',
  state: ''
})
const editPerson = reactive({
  id: '',
  username: '',
  usernumber: '',
  role: '',
  state: ''
})
// const showList: any = ref([])
function handleClose2() {
  dialogVisible2.value = false
}

function search() {
  console.log(searchName.value);
  showList.value = showList.value.filter(it => it.username.includes(searchName.value))
}

function handleEdit(row) {
  console.log(row);
  
  console.log('修改', row.id);
  console.log('1', editP.info);
  editP.info = JSON.parse(JSON.stringify(row))
  console.log('2', editP.info);
  console.log(editP.info);
  dialogVisible2.value = true
}
function handleDelete(id) {
  console.log(id);
  let list = JSON.parse(localStorage.getItem('roleList'))
  list.forEach((it, i) => {
    if (it.id == id) {
      console.log(i);
      list.splice(i, 1)
    }
  })
  localStorage.setItem('roleList', JSON.stringify(list))
  showList.value = JSON.parse(localStorage.getItem('roleList'))
}

const handleSave = (id) => {
  showList.value.forEach((it, i) => {
    if (it.id == id) {
      console.log(showList.value[i]);
      showList.value[i] = editP.info
      console.log('22222',showList.value[i]);
    }
  });
  console.log('修改后',editP.info);
  const userList = {
    id: newPerson.id,
    username: newPerson.username,
    role: newPerson.role,
    state: newPerson.state
  }
  List.value = showList.value
  console.log(List.value);
  localStorage.setItem('roleList', JSON.stringify(List.value))
  showList.value = JSON.parse(localStorage.getItem('roleList'))

  dialogVisible2.value = false;
}

function addEvt() {
  dialogVisible.value = false
  const userList = {
    id: newPerson.id,
    username: newPerson.username,
    usernumber: newPerson.usernumber,
    role: newPerson.role,
    state: newPerson.state
  }
  List.value = showList.value = false?[]:showList.value
  List.value.push(userList)
  console.log(List.value);
  
  newPerson.id = Date.now() + ''
  newPerson.username = ''
  newPerson.usernumber = ''
  newPerson.role = ''
  newPerson.state = ''
  localStorage.setItem('roleList', JSON.stringify(List.value))
  showList.value = JSON.parse(localStorage.getItem('roleList'))
  // console.log(showList.value);
}
onMounted(() => {
  if(!JSON.parse(localStorage.getItem('roleList'))){
    localStorage.setItem('roleList', JSON.stringify([]))
  }
  showList.value = JSON.parse(localStorage.getItem('roleList'))
})

// 表单校验规则
// const rules = reactive({
//   username: [
//     { required: true, message: '请输入用户名', trigger: 'blur' },
//     { min: 2, max: 20, message: '长度为2-20', trigger: 'blur' },
//   ],
//   usernumber: [
//     { required: true, message: '请输入账号', trigger: 'blur' },
//     { min: 2, max: 20, message: '长度为2-20', trigger: 'blur' },
//   ],
//   role: [
//     {
//       required: true,
//       message: '请选择角色',
//       trigger: 'change',
//     },
//   ],
//   state: [
//     {
//       required: true,
//       message: '请选择状态',
//       trigger: 'change',
//     },
//   ],
// })


// left-height
// const maxHeight = ref(650)
// onMounted(() => {
//   maxHeight.value = document.body.scrollHeight - 264
//   console.log(maxHeight.value)
// })

// 表单数据
// const tableData: User[] = reactive([])
// const defaultChecked = ref(['64634367a074b8ae4f2ca7e3'])
// const columns = reactive([
//   {
//     label: '用户名',
//     prop: 'name',
//   },
//   {
//     label: '账号',
//     prop: 'id',
//   },
//   {
//     label: '角色',
//     prop: 'description',
//   },
//   {
//     label: '状态',
//     key: 'status',
//     slot: true,
//   },
//   {
//     label: '操作',
//     width: '115',
//     key: 'oper',
//     slot: true, // 自定义的属性名称, 标记该列的渲染使用插槽自定义
//   },
// ])

// getRoles().then((res: AxiosResponse<any, any>) => {
//   const { list } = res
//   // createdAt: "2022-11-27T14:07:45.138Z"
//   // description: "超级管理员, 拥有所有权限."
//   // id: "63836f31408dc8929d700a48"
//   // name: "超级管理员"
//   // status:true

//   list.forEach((item: any) => {
//     const {
//       id, createdAt, description, name, status
//     } = item
//     tableData.push({
//       id, createdAt, description, name, status
//     })
//   })
// })
// interface Role {
//   id: string
//   name: string
//   children?: []
// }
// const defaultProps = {
//   children: 'children',
//   label: 'name',
//   id: 'id',
// }
// const data: Role[] = reactive([])
// // 所有权限
// getPermissions().then((res: AxiosResponse<any, any>) => {
//   let { list } = res
//   // createdAt: "2023-05-06T07:43:42.916Z"
//   // id: "6456052ea074b8ae4f2c8267"
//   // name: "仪表盘"
//   // pid: "6456052ea074b8ae4f2c8267"
//   // rule: "/dashboard"
//   // show: true
//   // status: false
//   // type: 1
//   list.forEach((item: any) => {
//     list.forEach((item2: any) => {
//       if (item2.id === item.pid) {
//         if (item2.children) {
//           item2.children.push(item)
//         } else {
//           item2.children = [item]
//         }
//         // list.
//       }
//     })
//   })
//   list = list.filter((item: any) => !item.pid)
//   data.splice(0, 1, ...list.reverse())
//   console.log(data)
// })
// // 修改权限
// const roleUpdate = async (row: any) => {
//   defaultChecked.value = []
//   const { permissions } = await getPermissionsId(row.id)
//   console.log(permissions)
//   permissions.forEach((item: any) => {
//     defaultChecked.value.push(item.id)
//   })
//   console.log(defaultChecked.value)
//   // ElNotification({
//   //   title: '权限查询成功',
//   //   message: defaultChecked.value as string,
//   //   type: 'success',
//   // })
// }
// // 删除
// const roleRemove = (row: any) => {
//   console.log(row)
// }
// // 保存权限
// const saveRole = () => {
//   // ElNotification({
//   //   title: '成功',
//   //   message: defaultChecked.value,
//   //   type: 'success',
//   // })
// }
</script>

<style scoped>
.top {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-button--small{
  margin-left: 10px;
}
.el-input {
  width: 200px;
  margin-right: 10px;
}
</style>
